<template>
  <div class="BindPhone">
    <Header title="绑定手机号" v-if="type!='edit'"></Header>
    <Header title="编辑个人信息" v-else></Header>
    <div style="padding:42px 0 0 0">
      <div class="myinfo">
        <div>
          <div class="textMiddle">真实姓名</div>
          <div class="textinp">
            <input type="text" v-model="username" placeholder="输入真实姓名">
          </div>
        </div>
        <div>
          <div class="textMiddle">出生时间</div>
          <div class="textinp">
            <!--<input type="text" placeholder="选择出生时间">-->
            <datetime :min-year="1949-1-20"
                      v-model="datevalue">
            </datetime>
          </div>
        </div>
        <div>
          <div class="textMiddle">行业</div>
          <div class="textinp">
            <input type="text" v-model="industry" placeholder="请输入行业">
          </div>
        </div>
        <div>
          <div class="textMiddle">备考科目</div>
          <div class="textinp">
            <input type="text" v-model="examSubject" placeholder="请输入备考科目">
          </div>
        </div>
        <!--<div>-->
        <!--<div class="textMiddle">籍贯</div>-->
        <!--<div class="textinp">-->
        <!--&lt;!&ndash;<input type="text" placeholder="选择籍贯">&ndash;&gt;-->
        <!--<x-address v-model="addvalue" :list="addressData" title="" placeholder="选择籍贯"></x-address>-->
        <!--</div>-->
        <!--</div>-->
        <div v-if="type!='edit'">
          <div class="textMiddle">手机号码</div>
          <div class="textinp">
            <input type="text" v-model="tel" placeholder="输入手机号码">
          </div>
          <x-button type="primary" @click.native="TimeOut?'':__getcode()"
                    style="color:#959595;width: 90px;font-size: 12px;height: 38px;position:absolute;right: 12px;border-left: 1px #888 solid;background: #fff;border: none;">

            {{TimeOut?CountTime+'S':'获取验证码'}}

          </x-button>
        </div>
        <div v-if="type!='edit'">
          <div class="textMiddle">验证码</div>
          <div class="textinp">
            <input style="width:100px" type="text" v-model="mobileVerifyCode" placeholder="输入手机号码">
          </div>
        </div>
      </div>
    </div>
    <x-button type="primary" class="saveinfo" @click.native="save_info" v-if="type!='edit'">确定</x-button>
    <x-button type="primary" class="saveinfo" @click.native="edit_info" v-if="type=='edit'">确定</x-button>
  </div>
</template>

<script>
import Vue from 'vue'
import {XButton, Confirm, Datetime, XAddress, ChinaAddressV4Data} from 'vux'
import Header from './../Header'
import {EditUserInfo, GetCode, EditInfo, UserInfo} from '../../api/mine'

export default {
  data () {
    return {
      username: '', // 用户姓名
      datevalue: '出生年月日', // 出生日期
      industry: '', // 行业
      examSubject: '', // 备考科目
      addressData: ChinaAddressV4Data,
      tel: '', // 手机号
      mobileVerifyCode: '', // 验证码
      addvalue: [],
      TimeOut: false,
      CountTime: 60,
      type: ''
    }
  },
  created () {
    if (Object.keys(this.$route.query).length > 0) {
      this.type = this.$route.query.type
      UserInfo().then(res => {
        this.username = res.data.data.name
        this.datevalue = res.data.data.birthDate
        this.examSubject = res.data.data.examSubject
        this.industry = res.data.data.industry
      })
    }
  },
  methods: {
    save_info () {
      let _this = this
      if (_this.tel && _this.username && _this.datevalue && _this.industry && _this.examSubject) {
        if (!(/^1[34578]\d{9}$/.test(_this.tel))) {
          Vue.$vux.toast.text('手机号码格式有误，请重填', 'middle')
          return
        }
        EditInfo({
          'birthDate': _this.datevalue,
          'examSubject': _this.examSubject,
          'industry': _this.industry,
          'mobileVerifyCode': _this.mobileVerifyCode,
          'name': _this.username,
          'tel': _this.tel
        }).then(res => {
          if (res.data.status === 'success') {
            Vue.$vux.confirm.show({
              content: `  <img src="static/icon/my_icon_pay_success@3x.png" style="width: 60px" alt="">
          <p>信息修改成功</p>`,
              showCancelButton: false,
              onConfirm () {
                this.$router.push({
                  path: `/Mine`
                })
              }
            })
          } else {
            Vue.$vux.confirm.show({
              content: `  <img src="static/icon/pop_icon_!@3x.png" style="width: 60px" alt="">
          <p>${res.data.msg}</p>`,
              showCancelButton: false,
              onConfirm () {
              }
            })
          }
        })
      } else {
        Vue.$vux.toast.text('输入框不能为空', 'middle')
      }
    },
    edit_info () {
      let _this = this
      if (_this.username) {
        EditUserInfo({
          'birthDate': _this.datevalue,
          'examSubject': _this.examSubject,
          'industry': _this.industry,
          'name': _this.username
        }).then(res => {
          if (res.data.status === 'success') {
            Vue.$vux.confirm.show({
              content: `  <img src="static/icon/my_icon_pay_success@3x.png" style="width: 60px" alt="">
          <p>信息修改成功</p>`,
              showCancelButton: false,
              onConfirm () {
                _this.$router.push({
                  path: `/Mine`
                })
              }
            })
          } else {
            Vue.$vux.confirm.show({
              content: `  <img src="static/icon/pop_icon_!@3x.png" style="width: 60px" alt="">
          <p>${res.data.msg}</p>`,
              showCancelButton: false,
              onConfirm () {
                console.log('11111')
              }
            })
          }
        })
      } else {
        Vue.$vux.toast.text('输入框不能为空', 'middle')
      }
    },
    __getcode () {
      if (!(/^1[34578]\d{9}$/.test(this.tel))) {
        Vue.$vux.toast.text('手机号码格式有误，请重填', 'middle')
        return
      }
      Vue.$vux.loading.show({
        text: '请稍等...'
      })
      GetCode({
        'tel': this.tel
      }).then(res => {
        if (res.data.status === 'success') {
          Vue.$vux.loading.hide()
          this.TimeOut = true
          var count = setInterval(() => {
            this.CountTime -= 1
            if (this.CountTime < 1) {
              clearInterval(count)
              this.CountTime = 60
              this.TimeOut = false
            }
          }, 1000)
          Vue.$vux.toast.text('验证码发送成功', 'middle')
        }
      })
    }
  },
  components: {
    Header,
    XButton,
    Confirm,
    Datetime,
    XAddress
  }
}
</script>

<style lang='less' type="text/less">
  .BindPhone {
    font-size: 14px;
    .vux-cell-value{
      color: #999!important;
    }
    .myinfo {
      background: #fff;
      padding: 0 12px;
      & > div {
        display: flex;
        height: 46px;
        align-items: center;
        border-bottom: 1px #F8FAF9 solid;
        input {
          padding: 8px 0;
          border: none;
          font-size: 14px;
          &:focus {
            outline: none;
          }
        }
        .textMiddle {
          width: 80px;
          font-size: 15px;
        }
        .textinp {
          flex: 1;
        }
      }
      .vux-popup-picker-select {
        text-align: left !important;
        margin-left: -6px;
      }
      .weui-cell__ft {
        text-align: left;
        margin-left: 0px;
      }
      .weui-cell__ft:after {
        display: none;
      }
    }
    .saveinfo {
      width: calc(100% - 15px);
      height: 42px;
      line-height: 42px;
      font-size: 16px;
      margin-top: 24px;
      color: #fff;
      border-radius: 42px;
      background-color: @common-color;
    }
    .weui-btn:after{
      border: none;
    }
  }

</style>
